<template>
  <div class="rank-content">
    <div
      class="rankingListItem"
      v-for="(r, index) in RankingList"
      :key="(index, r.id)"
      @click="rankingDetail(r)"
    >
      <div class="rank-num" :class="{ 'big-font': index < 3 }">
        {{ index | rankNum }}
      </div>
      <div>
        <img :src="r['vertical_cover']" alt="" />
      </div>
      <div class="item-detail">
        <div class="title">
          {{ r.title }}
        </div>
        <div class="item-text">
          <div class="author">
            {{ r.author.join(" ") }}
          </div>
          <div class="style">{{ r.styles[0]?.name }}</div>
          <div class="progress" v-if="r['is_finish']">
            共 {{ r["last_short_title"] }} 话
          </div>

          <div class="progress" v-else>
            更新至 {{ r["last_short_title"] }} 话
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    type: Number,
  },
  data() {
    return {
      RankingList: [],
    };
  },
  methods: {
    async getRankingListUrl() {
      let { data } = await this.$http(this.url);

      this.RankingList = data.data;
    },
    rankingDetail(r) {
      r.id = r["comic_id"];
      this.$router.push({ path: "/comic_id=" + r.id });
    },
  },
  computed: {
    url() {
      return `https://apis.netstart.cn/mbcomic/HomeHot?type=${this.type}`;
    },
  },
  filters: {
    rankNum(index) {
      return index + 1 > 3 && index + 1 < 10 ? "0" + (index + 1) : index + 1;
    },
  },
  mounted() {
    this.getRankingListUrl();
  },
  beforeRouteUpdate(to, from, next) {
    next();
    this.getRankingListUrl();
    this.rankStatus();
  },
  watch: {
    type(newtype, oldtype) {
      if (newtype != oldtype) {
        this.getRankingListUrl();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.rank-content {
  width: 375px;
  margin: 0 auto;
}
.rankingListItem {
  width: 311px;
  height: 139px;
  padding: 0 20px 0 44px;
  position: relative;
  margin-bottom: 20px;
  display: flex;
  img {
    width: 102px;
  }
  .rank-num {
    position: absolute;
    color: rgb(207, 152, 112);
    font-size: 30px;
    font-weight: bolder;
    top: -14px;
    left: 7px;
    z-index: -1;
    &.big-font {
      font-size: 74px;
      font-style: italic;
      top: -25px;
      left: 0;
    }
  }
  .item-detail {
    position: relative;
    margin-left: 8px;
    width: 191px;
    height: 135px;
    .title {
      font-size: 18px;
      color: #1c1d1f;
    }
    .item-text {
      width: 200px;
      color: #90959b;
      font-size: 12px;
      position: absolute;
      bottom: -4px;
      .author {
        width: 100%;
        height: 24px;
      }
      .style {
        height: 24px;
      }
      .progress {
        height: 24px;
      }
      .icon {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 20px;
        height: 20px;
        background-image: url(../assets/hold.png);
        background-size: cover;
        &.up {
          background-image: url(../assets/up.png);
        }
        &.down {
          background-image: url(../assets/down.png);
        }
      }
    }
  }
}
</style>